<script setup lang="ts">
import ProductPicker from "@/dalanka-admin/components/product-picker.vue";
import { ref } from "vue";

const productPickerRef = ref();
</script>

<template>
  <umi-page :gap="16">
    <umi-container padding="16px" bg-color="#f2f2f2" :gap="16">
      <umrp-breadcrumb :items="['营销推广', '商品优惠券', '创建优惠券']"></umrp-breadcrumb>
      <umi-card title="创建商品优惠券">
        <umi-text :size="16" margin="0 0 24px 0" bold>基础信息</umi-text>
        <umi-form :style="{ width: '600px' }">
          <umi-form-item label="优惠券名称" required>
            <umrp-input></umrp-input>
          </umi-form-item>
          <umi-form-item label="可领取期限" required>
            <umi-datepicker-range></umi-datepicker-range>
          </umi-form-item>
          <umi-form-item label="优惠券类型" required>
            <umi-space direction="vertical" :size="12">
              <umi-radio checked>满减券</umi-radio>
              <umi-space align="center" :size="12" style="background-color: #f2f2f2; padding: 10px; border-radius: 4px">
                <umi-text>满</umi-text>
                <umi-input-number extra="元" :min="0"></umi-input-number>
                <umi-text>减</umi-text>
                <umi-input-number extra="元" :min="0"></umi-input-number>
              </umi-space>
            </umi-space>
          </umi-form-item>
          <umi-form-item label="券使用时间" required>
            <umi-space direction="vertical" :size="12">
              <umi-radio checked>指定天数</umi-radio>
              <umi-space align="center" :size="12" style="background-color: #f2f2f2; padding: 10px; border-radius: 4px">
                <umi-text>生效后</umi-text>
                <umi-input-number placeholder="需<90" extra="天" :min="0"></umi-input-number>
                <umi-text>内可用</umi-text>
              </umi-space>
            </umi-space>
          </umi-form-item>
          <umi-form-item label="优惠券库存总量" required>
            <umi-input-number extra="张" :default-value="1"></umi-input-number>
          </umi-form-item>
          <umi-form-item label="单日发放量上限" required>
            <umi-input-number extra="张" :default-value="1"></umi-input-number>
          </umi-form-item>
          <umi-form-item label="单用户限额" required>
            <umi-input-number extra="张" :default-value="1"></umi-input-number>
          </umi-form-item>
          <umi-form-item label="单用户单日限额" required>
            <umi-input-number extra="张" :default-value="1"></umi-input-number>
          </umi-form-item>
        </umi-form>
        <umi-divider padding="24px 0"></umi-divider>
        <umi-space direction="vertical" :size="16">
          <umi-text :size="16" bold>适用商品范围</umi-text>
          <umi-button type="primary" @click="productPickerRef.show()">添加商品</umi-button>
          <umi-table :data="new Array(5)">
            <template #columns>
              <umi-table-column title="商品名称/ID" slot-name="products"></umi-table-column>
              <umi-table-column title="商品价格(元)" slot-name="price"></umi-table-column>
              <umi-table-column title="操作" slot-name="action" :width="120"></umi-table-column>
            </template>
            <template #products>
              <umi-space :size="10" align="center">
                <umrp-image :width="50" :height="50"></umrp-image>
                <umi-space direction="vertical" :size="10">
                  <umi-text>0基础入门体验课</umi-text>
                  <umi-space :size="4">
                    <umrp-text>ID: 202509010001</umrp-text>
                    <umi-icon name="copy"></umi-icon>
                  </umi-space>
                </umi-space>
              </umi-space>
            </template>
            <template #price>
              <umi-text>168.00</umi-text>
            </template>
            <template #action>
              <umi-button type="primary">移除</umi-button>
            </template>
          </umi-table>
        </umi-space>
      </umi-card>
    </umi-container>
    <ProductPicker ref="productPickerRef" />
    <template #action>
      <umi-container direction="horizonal" :gap="16" justify="center">
        <umi-button type="primary">保存</umi-button>
        <router-link :to="{ name: 'PromotionProductCoupon' }">
          <umi-button>取消</umi-button>
        </router-link>
      </umi-container>
    </template>
  </umi-page>
</template>
